<template>
  <div class="list-box">
    <h5 class="list-title">用户列表</h5>
    <ul class="user-list-box">
      <li
        v-for="(item,index) in userlist"
        :key="index"
        :class="index===temp||index===flag?'active':''"
        class="list-box-item"
        @click="toggleUsername(index)"
        @mouseenter="mouseover(index)"
        @mouseleave="mouseLeave"
      >
        <img :src="item.img" class="header-img" />
        <p class="username">{{item.username}}</p>
        <div class="liner"></div>
      </li>
    </ul>
  </div>
</template>
// 一个标签可以同时使用静态class和动态class
<script>
export default {
  props: {
    userlist: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
        // 标记选中
      temp: "",
    //   标记鼠标悬浮
      flag:''
    };
  },
  methods: {
    toggleUsername(index) {
      this.temp = index;
      this.$emit("toggleName", index);
    },
    mouseover(index){
        this.flag=index;
        
    },
    mouseLeave(){
        this.flag=''
    }
  },
  components: {}
};
</script>

<style scoped>
.list-title {
  border-bottom: 1px solid #ddd;
  transform: translateY(-50%);
  text-align: center;
  padding-bottom: 1vh;
  padding-top: 1vh;
  position: fixed;
  width: 25%;
}
/* 设置滚动条消失 */
::-webkit-scrollbar {
  display: none;
}
.user-list-box {
  position: relative;
  margin-top: 40px;
  height: 64.8vh;
  overflow: auto; /*设置滚动条*/
}
.list-box-item {
  display: flex;
  position: relative;
  margin-left: -40px;
  height: 40px;
}
.header-img {
  height: 30px;
  width: 30px;
  border-radius: 8px;
  transform: translate(6px, 1px);
}
.username {
  position: relative;
  left: 15px;
  top: -5px;
  height: 35px;
  width: 80%;
  cursor: pointer;
  font-size: 12px;
}
.liner {
  width: 300%;
  height: 30px;
  border-bottom: 1px solid #fff;
  position: absolute;
  left: -80%;
  top: 26%;
  transform: scale(0.3, 0.3);
}
.active {
  background: #ccccd6;
}
</style>
